<template>
	<view class="mine-credit-present">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<navBar :title="'推广积分转赠'"></navBar>
		</view>
		<view class="credit-content">
			<view class="top-content">
				<view class="line-content">
					<view class="credit-title">推广积分</view>
					<view class="credit">{{ reputation }}</view>
				</view>
			</view>
			<view class="content">
				<view class="title">积分转赠</view>
				<view class="input-content">
					<view class="input-title">对方账号</view>
					<input class="input-style" type="number" placeholder-class="input-placeholder" placeholder="请输入会员手机号或ID"
						maxlength="11" v-model="mobile" :focus="mobileFocus" @blur="mobileLostFocus"></input>
				</view>
				<view class="check-name">
					<view class="name">{{ userName }}</view>
					<view class="check-button" @click="checkUser">查找</view>
				</view>
				<view class="input-content">
					<view class="input-title">转出数量</view>
					<input class="input-style" type="number" placeholder-class="input-placeholder" placeholder="请输入转赠数量"
						v-model="number" :focus="numberFocus" @blur="numberLostFocus"></input>
				</view>
				<view :class="number == '' ? 'button' : 'active-button'" @click="confirmPresent">确定</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="mask" v-if="showTips" @touchmove.stop.prevent>
			<u-transition :show="showTips">
				<view class="modal-bg-box">
					<view class="title">提示</view>
					<view class="inner-box">
						<view class="text-tips" :selectable="false">{{ maskTips }}</view>
						<view class="button-box">
							<view class="button-two" @click="confirm">确定</view>
						</view>
					</view>
				</view>
			</u-transition>
		</view>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		Reputation_log,
		currencyRotation,
		getUserName,
		GETuserinfo
	} from '@/common/api.js';
	import navBar from "@/components/NavBar.vue" // 导入顶部导航
	export default {
		components: {
			navBar
		},
		data() {
			return {
				/* 绿色积分转赠 */
				mobile: '', // 收货人手机号
				mobileFocus: false, // 手机号状态
				number: '', // 数量手机号
				numberFocus: false, // 数量状态
				reputation: '0', // 账户抢购分
				userName: '', // 账户名称
				isCheckName: 0, // 是否检查过用户

				/* 弹窗 */
				maskTips: '转赠成功', // 弹窗提示
				showTips: false, // 弹窗状态
			};
		},
		onLoad() {
			/* 获取用户信息 */
			this.getUser();
		},
		onShow() {

		},
		methods: {

			/* 获取用户数据 */
			getUser() {
				const that = this;
				GETuserinfo().then((res) => {
					const that = this;
					if (res.status === 1) {
						const result = res.data;
						that.reputation = result.reputation_value;
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 确定转赠 */
			confirmPresent() {
				const that = this;
				if (that.mobile === '') {
					Fn.Toast('手机号不能为空', 3, 1500);
					that.mobileFocus = true;
					return;
				};
				if (that.number === '') {
					Fn.Toast('转出数量不能为空', 3, 1500);
					that.numberFocus = true;
					return;
				};
				if (that.number <= 0) {
					Fn.Toast('转出数量不能少于0', 3, 1500);
					this.number = '';
					this.numberFocus = true;
					return;
				};
				if (parseInt(that.number) > parseInt(that.reputation)) {
					Fn.Toast('可转赠绿色积分不足，请重新输入', 3, 1500);
					this.number = '';
					this.numberFocus = true;
					return;
				};
				if (that.userName === '') {
					Fn.Toast('请先确认用户是否存在', 3, 1500);
					return;
				};
				if (that.isCheckName === 0) {
					Fn.Toast('请重新确认转赠用户信息', 3, 1500);
					that.mobileFocus = true;
					return;
				} else {
					const params = {
						userPhone: that.mobile,
						num: that.number
					};
					uni.$u.throttle(() => {
						currencyRotation(params).then((res) => {
							if (res.status === 1) {
								const result = res;
								that.showTips = true;
							} else {
								Fn.Toast(res.msg, 3, 1500);
							}
						});
					}, 1500);
				};
			},

			// /* 账单明细 */
			// getDetail() {
			// 	const that = this;
			// 	that.pages = 1;
			// 	const params = {
			// 		page: that.pages,
			// 		limit: that.amount
			// 	};
			// 	Reputation_log(params).then((res) => {
			// 		const result = res.data;
			// 		that.reputation = result.reputation_value;
			// 		that.total_page = result.last_page;
			// 		that.list = result.data.map(item => {
			// 			return {
			// 				id: item.id,
			// 				line_title: item.mark,
			// 				line_date: item.create_time,
			// 				extract_money: item.amount,
			// 				amount: item.amount
			// 			};
			// 		});
			// 		if (that.list.length == 0) {
			// 			this.loading.status = 'nomore';
			// 		};
			// 	});
			// },

			/* 输入用户手机号-获取昵称 */
			checkUser() {
				const that = this;
				if (that.mobile === '') {
					Fn.Toast('请输入转赠手机号', 3, 1500);
					that.mobileFocus = true;
					return;
				};
				const params = {
					phone: that.mobile
				};
				getUserName(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						if (result == null) {
							that.userName = '未能查询到此用户';
							that.isCheckName = 0;
						} else {
							that.userName = result.userName + ' ID: ' + result.userId;
							that.isCheckName = 1;
						};
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 手机号失去焦点时 */
			mobileLostFocus(event) {
				this.mobileFocus = false;
				if (this.mobile === '') {
					this.mobile = '';
				} else {
					this.checkUser();
				};
			},

			/* 数量失去焦点时 */
			numberLostFocus(event) {
				this.numberFocus = false;
			},

			/* 确认 */
			confirm() {
				this.showTips = false;
				this.mobile = '';
				this.number = '';
				this.userName = '';
				Fn.Loading('加载中');
				setTimeout(() => {
					Fn.LoadingOff();
					// this.getDetail();
					this.getUser();
				}, 800);
			},
		}
	}
</script>

<style lang="scss">
	.mine-credit-present {
		

		.mask {
			position: fixed;
			z-index: 1001;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);

			.modal-bg-box {
				background-color: #FFFFFF;
				width: 580rpx;
				position: absolute;
				left: 50%;
				top: 45%;
				transform: translate(-50%, -50%);

				.title {
					text-align: center;
					margin: 40rpx 0;
					font-size: 42rpx;
					font-family: PingFang_Bold;
				}

				.inner-box {
					margin: 20rpx 55rpx 40rpx 55rpx;
					text-align: center;

					.text-tips {
						display: block;
						line-height: 70rpx;
						font-size: 33rpx;
						font-family: Alibaba PuHuiTi;
						font-family: PingFang_Bold;
						color: #89898C;
						word-wrap: break-word;
					}

					.button-box {
						text-align: center;
						margin-top: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.button-one {
							display: inline-block;
							padding: 0 10px;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							margin: 0 40rpx 0 0;
							text-align: center;
							color: #000000;
							border: 2px solid #000000;
							border-radius: 14rpx;
							font-size: 26rpx;
							font-family: PingFang_Bold;
							cursor: pointer;
						}

						.button-two {
							padding: 0 10px;
							background-color: #000000;
							display: inline-block;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							text-align: center;
							color: #FFFFFF;
							border-radius: 14rpx;
							font-size: 26rpx;
							// font-weight: bold;
							font-family: PingFang_Bold;
							cursor: pointer;
						}
					}
				}
			}
		}
		
		.credit-content {
			padding: 30rpx 18px;
			
			.top-content {
				height: 220rpx;
				background-image: url('~@/static/images/mine/extract/background.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				border-radius: 20rpx;
				box-shadow: 0px 2px 5px rgba(247, 29, 31, 0.5);
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
			
				.line-content {
					text-align: center;
			
					.credit-title {
						color: rgba(255, 255, 255, 0.7);
						font-size: 34rpx;
						font-family: AlibabaPuHuiTi_2_55_Regular;
					}
			
					.credit {
						color: #FFFFFF;
						font-size: 70rpx;
						font-family: Alimama_ShuHeiTi_Bold;
					}
				}
			}
			
			.content {
				margin-top: 40rpx;
			
				.title {
					font-size: 38rpx;
					font-family: AlibabaPuHuiTi_2_65_Medium;
				}
			
				.input-content {
					padding: 30rpx 26rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border: 1px solid #F4F4F5;
					border-radius: 14rpx;
					font-family: AlibabaPuHuiTi_2_55_Regular;
			
					.input-style {
						width: 45vw;
						color: #F71D1F;
						font-size: 30rpx;
						text-align: right;
					}
			
					.input-placeholder {
						color: #a5a5a8;
						font-size: 30rpx;
					}
			
					.input-title {
						font-size: 32rpx;
					}
					
					&:nth-child(2) {
						margin-top: 20rpx;
					}
					
					&:nth-child(4) {
						margin-top: 60rpx;
					}
				}
			 
				.check-name {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;
			
					.name {
						color: #F71D1F;
						font-size: 34rpx;
						font-family: AlibabaPuHuiTi_2_75_SemiBold;
					}
			
					.check-button {
						background-color: #F71D1F;
						color: #FFFFFF;
						width: 15vw;
						line-height: 60rpx;
						text-align: center;
						font-size: 28rpx;
						border-radius: 10rpx;
					}
				}
			
				.button {
					background-color: rgba(247, 29, 31, 0.7);
					margin: 100rpx auto 0 auto;
					text-align: center;
					line-height: 100rpx;
					color: #FFFFFF;
					font-size: 34rpx;
					font-family: AlibabaPuHuiTi_2_85_Bold;
					border-radius: 5px;
				}
				
				.active-button {
					background-color: rgba(247, 29, 31, 1);
					margin: 100rpx auto 0 auto;
					text-align: center;
					line-height: 100rpx;
					color: #FFFFFF;
					font-size: 34rpx;
					font-family: AlibabaPuHuiTi_2_85_Bold;
					border-radius: 5px;
				}
			}
		}
	}
</style>
